import React, { useState } from "react";
import "./ProductStats.less";
import { Button, Modal } from "antd";
// 定义产品类型
interface Product {
  id: number;
  name: string;
  category: string;
  price: number;
  inStock: boolean;
}

const ProductStats: React.FC = () => {
  // 控制弹窗显示状态
  const [isModalOpen, setIsModalOpen] = useState(false);

  // 示例产品数据
  const products: Product[] = [
    {
      id: 1,
      name: "Laptop",
      category: "Electronics",
      price: 999,
      inStock: true,
    },
    { id: 2, name: "Mouse", category: "Electronics", price: 25, inStock: true },
    { id: 3, name: "Shirt", category: "Clothing", price: 30, inStock: false },
    { id: 4, name: "Pants", category: "Clothing", price: 50, inStock: true },
    {
      id: 5,
      name: "Headphones",
      category: "Electronics",
      price: 150,
      inStock: true,
    },
  ];

  // 打开弹窗
  const showModal = () => {
    setIsModalOpen(true);
  };

  // 关闭弹窗
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <div className="product-stats">
      <h2>Product Statistics</h2>

      {/* 新增按钮 - 用于打开弹窗 */}
      <Button type="primary" onClick={showModal} style={{ marginBottom: 16 }}>
        查看产品详情
      </Button>

      {/* 弹窗组件 */}
      <Modal
        title="产品详情"
        open={isModalOpen}
        onCancel={handleCancel}
        footer={[
          <Button key="cancel" onClick={handleCancel}>
            关闭
          </Button>,
        ]}
      >
        <p>这是产品统计的详细信息弹窗</p>
        <p>总产品数量: {products.length}</p>
        <p>总价值: {products.reduce((sum, item) => sum + item.price, 0)}</p>
      </Modal>

      <div className="stat-item">
        <h3>Products by Category</h3>
        <ul>
          {products.map((item) => (
            <li key={item.id}>
              {item.category}: {item.price}
            </li>
          ))}
        </ul>
      </div>
      <div className="stat-item">
        <h3>Total Value of All Products</h3>
      </div>

      <div className="stat-item">
        <h3>In-stock Products</h3>
      </div>
    </div>
  );
};

export default ProductStats;
